<template>
  <el-card class="box-card">

  <div slot="header" class="clearfix">
     <span style="color:#8df">夏帅帅</span>
   <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content bg-purple" >
      <span>标签内容</span>
      <el-input v-model="from.tags" placeholder="请输入"></el-input>
      </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
      <span>城市</span>
        <el-select @change='onchange' v-model="from.province"  placeholder="请选择">
          <el-option
            v-for="item in province"
            :key="item"
            :label="item"
            :value="item"
            >
          </el-option>
        </el-select>
      </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
      <span>地区</span>
        <el-select v-model="from.city"  placeholder="请选择">
          <el-option
            v-for="item in city"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
      <span>企业简称</span>
      <el-input v-model="from.shortName" ></el-input>
      </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
      <span class="type">状态</span>
        <el-select v-model="from.state" placeholder="请选择">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
        <el-button @click="onclear" size="mini">清除</el-button>
        <el-button @click="onserch" size="mini" type="primary">搜索</el-button>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">

      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <el-button @click="isshow=true" class="btn" icon="el-icon-edit" size="mini" type="success">新增用户</el-button>
      </div></el-col>
  </el-row>
  <el-row>
      <el-col class="collow" :span="24"><div class="grid-content bg-purple-dark">
        <i class="el-icon-info"></i>
        <span >共{{length}}条数据</span>
        </div></el-col>
    </el-row>
    <el-row>
       <el-table
      :data="alllist"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="number"
        label="企业编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="company"
        label="企业简称">
      </el-table-column>
        <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
            <el-table-column
        prop="creatorID"
        label="创建者">
      </el-table-column>
      <el-table-column
        label="创建日期">
        <template v-slot='{row}'>
          {{row.addDate|parseTimeByString}}
        </template>
      </el-table-column>
            <el-table-column
        prop="remarks"
        label="备注">
      </el-table-column>
       <el-table-column
        prop="state"
        label="状态">
        <template v-slot='{row}'>
          {{row.state|WhetherToEnable}}
        </template>
      </el-table-column>
        <el-table-column
        label="操作">
        <template v-slot='{row}'>
          <el-button plain type="primary" icon="el-icon-edit" circle @click="toupdate(row.id)"></el-button>
          <el-button v-if="row.state===1" plain type="warning" icon="el-icon-close" circle @click="open(row)"></el-button>
          <el-button v-else plain type="warning" icon="el-icon-check" circle @click="open(row)"></el-button>
           <!-- <el-button plain type="warning" icon="el-icon-check" circle @click="change(row)"></el-button> -->
          <el-button plain type="danger" icon="el-icon-delete-solid" circle @click="deletelist(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-row>
    <!-- 新增弹出框 -->
  <company :isshow='isshow' v-if='isshow'  :titleInfo='titleInfo' :formBase='from1' @newDataes='newDataes'/>
  <updatecompany  @closelogin='closelogin' :updateid='updateid' :formBase='from' :titleupdate='titleupdate' :updateshow='updateshow' v-if='updateshow'/>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="10"
      layout="prev, pager, next, sizes,jumper"
      :total="length">
    </el-pagination>
  </div>

</el-card>
</template>

<script>
import { provinces, citys } from '../../api/hmmm/citys'
import { status } from '../../api/hmmm/constants'
import { list, remove, disabled } from '../../api/hmmm/companys'
import company from '../components/companys-add.vue'
import updatecompany from '../components/companys-update.vue'
// console.log(provinces())
export default {
  components: {
    company,
    updatecompany
  },
  data () {
    return {
      // updateshowout: true,
      updateshow: false,
      currentPage3: 1,
      province: [],
      city: [],
      from: {
        province: '',
        city: '',
        tags: '',
        shortName: ''
      },
      status,
      alllist: [],
      dialogVisible: true,
      titleInfo: { text: '创建用户', pageTitle: '' },
      from1: {
        province: '',
        city: '',
        tags: '',
        shortName: ''
      },
      isshow: false,
      length: null,
      titleupdate: { text: '编辑用户', pageTitle: '' },
      updateid: ''
    }
  },

  created () {
    this.getprovince()
    console.log(this.status)
    this.getalllist()
  },

  methods: {
    onchange (data) {
      console.log(data)
      this.from.province = data
      this.getcitys()
    },
    async getprovince () {
      const res = await provinces()
      console.log(res)
      this.province = res
    },
    async  getcitys () {
      console.log(this.from.province)
      const res = await citys(this.from.province)
      this.city = res
      console.log(this.from.city)
    },
    async getalllist () {
      const res = await list()
      console.log(res)
      this.alllist = res.data.items
      this.length = res.data.counts
    },
    async newDataes (formBase) {
      // await add(formBase)
      // console.log(123)
      // await add(formBase)
      this.getalllist()
      this.isshow = false
    },
    closelogin () {
      this.getalllist()
      this.updateshow = false
    },
    toupdate (id) {
      this.updateshow = true
      this.updateid = id
      console.log(this.updateid)
    },
    // 删除选中项
    async deletelist (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(row)
          this.getalllist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改是否启用状态
    change (row) {
      console.log(row)
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
    },
    open (row) {
      this.$confirm(row.state === 1 ? '已成功禁用, 是否继续?' : '已成功启用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (row.state === 1) {
          row.state = 0
        } else if (row.state === 0) {
          row.state = 1
        }
        try {
          await disabled({ id: row.id, state: row.state })
          this.getalllist()
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {

      })
    },
    async handleSizeChange (val) {
      const res = await list({ pagesize: val, ...this.from })
      this.alllist = res.data.items
      this.length = res.data.counts
    },
    async handleCurrentChange (val) {
      const res = await list({ page: val, ...this.from })
      this.alllist = res.data.items
      this.length = res.data.counts
    },
    async onserch () {
      const res = await list(this.from)
      this.alllist = res.data.items
      this.length = res.data.counts
      // console.log(this.from)
    },
    onclear () {
      this.from = {
        province: '',
        city: '',
        tags: '',
        shortName: ''
      }
      this.getalllist()
    }
  }
}
</script>

<style scoped lang='less'>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #f4f4f5;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
   .grid-content{
     display: flex;
   }
   .el-input{
     width: 80%;

   }
   span{
    line-height: 41px;
    margin-right: 10px;
   }
   .el-select{
     width: 80%;
   }
   .el-col{
     margin-top: 20px;
   }
   .type{
     margin-left: 30px;
   }
   .btn{
     margin-left: 170px;
   }
   .collow{
     margin-top: 5px;
     color: #98999d;
   }
   .el-icon-info{
     margin: 0 10px;
     font-size: 14px;
     margin-top: 15px;
   }
</style>
